<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            width: 100%;
            height: 200px;
            background-color: azure;
        }

        .normal {
            border: 10px solid #ccc;
        }

        .happy {
            box-shadow: 1px 1px 1px 1px salmon;
        }

        .one {
            border-radius: 100px;
        }

        .a1 {
            font-size: 100px;
        }

        .a2 {

            color: salmon;
        }
    </style>
</head>
<body>
<div id="app">
    <!--绑定class样式字符串写法 适合用于样式不确定需要动态指定-->
    <div class="active" :class="mood" @click="changeMood">绑定class样式字符串写法</div>
    <!--绑定class样式数组写法 适合用于要绑定的样式个数不确定名字不确定-->
    <div class="active" :class="[arr]" @click="arrPush">绑定class样式数组写法</div>
    <!--绑定class样式三元表达式法-->
    <div class="active" :class="this.isActive?'normal':null" @click="arrPush">绑定class样式三元表达式写法</div>
    <!-- 绑定class样式对象写法 适合用于要绑定的样式个数确定名字确定要动态确定用不用-->
    <div class="active" :class="classObj">绑定class样式对象写法</div>
</div>
<script src="../JavaScript/vue.js"></script>
<script>
    /*
    * 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，
    * 所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。
    * 因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组
    * */
    const vm = new Vue({
        el: "#app",
        data: {
            mood: "normal",
            arr: ["active", "normal", "happy"],
            isActive: true,
            classObj: {
                a1: false,
                a2: true
            }
        },
        methods: {
            changeMood() {
                this.mood = "happy"
            },
            arrPush() {
                this.arr.push("one")
            }
        }
    })
</script>
</body>
